<template name="tag-select">
	<view class="tag">
		<view class="grid col-5 grid-square">
			<view class="bg-img" v-for="(item,index) in dataList" :key="index" @click="tagClick(item.sort_id)" :style="item.selected == '1' ? ('color: ' + mainColor+';background:'+mainColor+'20;'): ''">
				<text>{{item.sort_name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'tag-select',
	data() {
		return {
			dataList: [],
			selectedStyle: {
				background: this.mainColor + '20',
				// border: '1rpx solid '+this.mainColor,
				color: this.mainColor
			},
			hiddenData: [],
		}
	},
	props: {
		mainColor:{
			type: String,
			default:function(){
				return '#06c1ae'
			}
		},
		list: {
		    type: Array,
		    default() {
		        return [];
		    }
		},
		// current: {
		//     type: Number,
		//     default() {
		//         return 0;
		//     }
		// },
		isFold: {
			type: Boolean,
			default: true
		}
	},
	watch:{
		isFold() {
			this.handleListShow()
		},
		list() {
			this.handleListShow()
		}
	},
	mounted() {
		this.handleListShow();
	},
	methods: {
		// 整理list，最多显示9个
		handleListShow(){
			console.log('zyl test');
			let end = this.list.length;
			let itemMore = {
				"sort_id": "more",
				"sort_name": "更多"
			};
			if(this.list.length > 9 && this.isFold) {
				this.dataList = this.list.slice(0,9);
				this.hiddenData = this.list.slice(10,end);
				this.dataList.push(itemMore);
			}else {
				this.dataList = this.list.slice(0,end);
			}
		},
		
		// tag点击事件
		tagClick(id) {
			let end = this.list.length;
			// 点击更多显示全部
			if(id == 'more') {
				this.dataList = this.list.slice(0,end);
			}else {
				// 设置选中
				// this.dataList.map((item,index) => {
				// 	if(item.sort_id == id) {
				// 		if(item.selected && item.selected == '1') {
				// 			this.$set(this.dataList[index],'selected', 0);
				// 		}else {
				// 			this.$set(this.dataList[index],'selected', 1)
				// 		}
				// 	}else {
				// 		this.$set(this.dataList[index],'selected', 0)
				// 	}
				// })
				// if(this.dataList.length<11) {
				// 	this.hiddenData.map((item,index)=>{
				// 		this.$set(this.hiddenData[index],'selected', 0)
				// 	})
				// }
			}
			this.$emit('handleTagClick',id)
		}
	}
		
}
</script>

<style scoped>
.tag {
	position: absolute;
	left: 0;
	right: 0;
	/* top:4px; */
	padding: 10upx 20upx;
	background-color: #FFFFFF;
	max-height: 200px;
	overflow-y: scroll;
	/* z-index: 99; */
}

.grid {
	display: flex;
	flex-wrap: wrap;
	
}

.grid.grid-square {
	overflow: hidden;
}
.grid.grid-square>view {
	margin-right: 20upx;
	margin-bottom: 20upx;
	border-radius: 6upx;
	position: relative;
	overflow: hidden;
}
.grid.col-5.grid-square>view {
	/* padding-bottom: calc((100% - 80upx)/5); */
	height: 60upx;
	line-height: 60upx;
	vertical-align: middle;
	width: calc((100% - 80upx)/5);
}

.grid.col-5.grid-square>view:nth-child(5n) {
	margin-right: 0;
}

.grid.col-5>view {
	width: 20%;
	text-align: center;
	background-color: #F2F2F4;
	font-size: 20upx;
	color: #666;
	display: inline-block;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow:ellipsis;
}

.grid.col-5>view>text {
	padding: 0 10upx;
}

</style>
